<template>
  <div class="saleNotReceipt">
    <!-- 销售发货未开票 -->
    <Chart :height="height" :option="option" v-bind="$attrs"></Chart>

  </div>
</template>

<script>
import { getChartData } from "@/api/echarts";
import Chart from "@/components/chart/chart.vue";

export default {
  name: "saleNotReceipt",
  components: { Chart },
  props: {
    'height': {
      default() {
        return '400';
      },
    },
  },
  data() {
    return {
      chartData: [],
      option: {},
    };
  },
  mounted() {
    getChartData({ custom_chart_id: "32" }).then((res) => {
      this.chartData = res.data.data;
      this.getRenderer();
    });
  },
  methods: {
    getRenderer() {
      var dataPara = [];
      for (var i = 0; i < this.chartData.item_title.length - 1; i++) {
        dataPara.push({
          type: 'bar', itemStyle: {
            normal: {
            }
          }
        });
      }
      this.option = {
        legend: {
          // selected: resultdat,
        },
        tooltip: {},
        dataset: {
          dimensions: this.chartData.item_title,
          source: this.chartData.show_list
        },
        grid: {
          left: "3%",
          right: "3%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: 'category', axisLabel: {
            interval: 0,
            rotate: 30
          }
        },
        yAxis: { type: 'value', },
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: dataPara
      };
    },
  },
};
</script>
<style lang="scss" scoped></style>